<template>
	<view class="container">
		<!-- 顶部结构 -->
		<view class="header">
			<image src="../../static/images/logo.png" class="logo"></image>
			<view class="center">
				<text class="iconfont icon-sousuo"></text>
				<input type="text" placeholder="搜素商品" class="text" placeholder-style="color:red" />
			</view>
			<button class="btn">按钮</button>
		</view>
		<!-- 滚动视图 -->
		<scroll-view scroll-x="true" class="nav" enable-flex>
			<view class="item" :class="{ active: curId == -1 }" @click="changeId(-1)"><text>推荐</text></view>
			<view class="item" :class="{ active: item.L1Id === curId }" v-for="(item, index) in goodList" :key="item.L1Id" @click="changeId(item.L1Id)">
				<text>{{ item.text }}</text>
			</view>
		</scroll-view>
		<scorll-view scroll-y="true" class="scroll">
			<!-- 轮播图 -->
			<div v-show="curId == -1">
				<swiper :indicator-dots="true" :autoplay="true" :interval="2000" class="swiper" circular>
					<swiper-item>
						<view class="swiper-item"><image src="https://yanxuan.nosdn.127.net/static-union/1673600844dc59e2.jpg?type=webp&imageView&quality=75&thumbnail=750x0" mode=""></image></view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item"><image src="https://yanxuan.nosdn.127.net/18235b3badd9acf669a873d8658caefb.jpg?type=webp&imageView&quality=75&thumbnail=750x0" mode=""></image></view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item"><image src="https://img.alicdn.com/imgextra/i2/6000000007882/O1CN01bj2VbV2860bE8ICNc_!!6000000007882-0-octopus.jpg" mode=""></image></view>
					</swiper-item>
				</swiper>
				<!-- 快速退款 -->
				<view class="box">
					<view class="item" v-for="(item, index) in iconList" :key="index">
						<image :src="item.icon" mode=""></image>
						<text>{{ item.desc }}</text>
					</view>
				</view>
				<!-- 商品 -->
				<view class="goods">
					<view class="item" v-for="(item, index) in goodList" :key="item.L1Id">
						<image :src="item.picUrl" mode=""></image>
						<text>{{ item.text }}</text>
					</view>
				</view>
				<!-- 卡片 -->
				<Card v-for="(item, index) in cardData" :key="index" :card="item"></Card>
			</div>
			<div v-show="curId != -1">
				<Other :curId="curId"></Other>
			</div>
		</scorll-view>
	</view>
</template>

<script>
import Card from './components/card.vue';
import { mapGetters } from 'vuex';
import Other from './components/Other.vue';
export default {
	data() {
		return {
			curId: -1
		};
	},
	components: {
		Card,
		Other
	},
	mounted() {
		this.$store.dispatch('getHomeData');
		this.$store.dispatch('getOther');
	},
	computed: {
		...mapGetters(['goodList', 'iconList', 'cardData'])
	},
	methods: {
		changeId(id) {
			this.curId = id;
		}
	}
};
</script>

<style lang="stylus" scoped>
.container
	width 100%
	height 100%
	.header
		display flex
		justify-content space-between
		align-items center
		padding 10rpx
		.logo
			width 120rpx
			height 40rpx
		.btn
			width 140rpx
			height 60rpx
			margin 0
			padding 0
			font-size 24rpx
			text-align center
			line-height 60rpx
		.center
			flex 1
			border 2rpx solid black
			display flex
			align-items center
			margin 10rpx
			.icon-sousuo
				margin 0rpx 10rpx
			.text
				font-size 24rpx
	.nav
		display flex
		width 750rpx
		height 82rpx
		.item
			width 140rpx
			height 80rpx
			white-space nowrap
			margin 0rpx 10rpx
			text
				display block
				width 140rpx
				height 80rpx
				text-align center
				line-height 80rpxF
		.active
			border-bottom 2rpx solid red
	.scroll
		width 750rpx
		height calc(100vh - 172rpx)
		.swiper
			width 750rpx
			height 300rpx
			.swiper-item
				width 750rpx
				height 300rpx
				image
					width 750rpx
					height 300rpx
		.box
			width 750rpx
			display flex
			margin-top 10rpx
			.item
				flex 1
				display flex
				justify-content center
				align-items center
				image
					width 32rpx
					height 32rpx
				text
					font-size 24rpx
		.goods
			display flex
			flex-wrap wrap
			margin-top 10rpx
			.item
				width 20%
				display flex
				flex-direction column
				align-items center
				margin 10rpx 0rpx
				image
					width 110rpx
					height 110rpx
				text
					font-size 28rpx
</style>
